<template>
  <div id="qualityadjustment" style="height: 100%; padding: 15px">
    <div class="d-vertical left_position"></div>
    <div class="d-vertical right_position"></div>
    <div class="left_text t-vertical">
      <p>主营业务账面成本</p>
    </div>
    <div class="mid_text t-vertical"><p>三级公司管理在本级并表的项目</p></div>
    <div class="right_text t-vertical"><p>三级公司管理在集团公司并表的项目</p></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'QualityAdjustmentChart',
  props: {
    EchartsSource: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      dataMap: {},
      years: [],
      key:0,
    }
  },
  watch: {
    EchartsSource: {
      handler(val) {
      },
      immediate: true,
      deep: true,
    },
  },
  beforeCreate() {
    console.log('echarts  创建了')
  },
  created() {
      // 获取总共的年份
      let years = Object.keys(this.EchartsSource[0].obj)
      // 给x轴的年份赋值
      this.years = [...years]
      this.getDataMap()
  },
  beforeDestroy() {
    console.log('echarts  摧毁了')
  },
  mounted() {
    this.$nextTick(() => {
      let options = this.getOptions()
      console.log('options ---->', options)
      this.getPieAndBarEchart(options)
    })
  },
  methods: {
    // 生成dataMap  格式化数据
    getDataMap() {
      this.EchartsSource.map((item) => {
        console.log(item.key)
        console.log(item.obj)
        this.dataMap['data' + item.key] = this.dataFormatter(item.obj)
      })
    },
    getOptions() {
      let option = []
      this.years.map((year) => {
        option.push({
          title: { text: year + '——工程项目质量成本调整项' },
          series: this.getseries(year),
        })
      })
      return option
    },
    getseries(i) {
      // 传入的参数年份
      let series = []
      for (const key in this.dataMap) {
        if (Object.hasOwnProperty.call(this.dataMap, key)) {
          series.push(
            // 获取对应年份的 this.dataMap[data1][年份]
            { data: this.dataMap[key][i] }
          )
        }
      }
      // 给饼图获取数据
      series.push({
        // 传入的参数年份
        data: this.getSumSeries(i),
      })
      return series
    },
    getSumSeries(i) {
      // i：年份
      let data = []
      // 获取名称
      this.EchartsSource.map((item, index) => {
        data.push({
          // 名称
          name: item.value,
          // 名称对应的数据项
          value: this.dataMap['data' + item.key][i + 'sum'],
        })
      })
      return data
    },
    // 数据格式化
    dataFormatter(obj) {
      var pList = [
        '中铁交通',
        '中铁南方',
        '中铁投资',
        '中铁开投',
        '中铁城投',
        '中铁上投',
        '中铁北方',
        '中铁文旅',
        '中铁工投资',
        '中铁发展投',
        '中铁广州投',
      ]
      for (const key in obj) {
        if (obj.hasOwnProperty.call(obj, key)) {
          var max = 0
          var sum = 0
          let temp = obj[key]
          for (var i = 0, l = temp.length; i < l; i++) {
            max = Math.max(max, temp[i])
            sum += Number.parseFloat(temp[i])
            temp[i] = {
              name: pList[i],
              value: Number.parseFloat(temp[i]),
            }
          }
          obj[key + 'max'] = Math.floor(max / 100) * 100
          obj[key + 'sum'] = sum
        }
      }
      return obj
    },
    getPieAndBarEchart(options) {
      let downloadJson = {
        '表外挂列成本': 4079,
        '已发生未记劳务费': 10365,
        '已发生未记材料成本': 4000,
        '已发生未记机械费': 15365,
        '已发生未记其他费用': 3079,
        '账面成本非正常调整': 16365,
        '多摊多计成本费用': 14365,
      }
      var dom = document.getElementById('qualityadjustment')
      var myChart = echarts.init(dom, null, {
        renderer: 'svg',
        useDirtyRect: false,
      })
      let option = {
        baseOption: {
          timeline: {
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 1000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: this.years,
            label: {
              formatter: function (s) {
                return new Date(s).getFullYear()
              },
            },
          },
          title: {
            // subtext: '工程项目质量成本调整项',
          },
          tooltip: {},
          calculable: true,
          grid: {
            top: '50%',
            bottom: 100,
            left: 80,
            right: 50,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value.replace('\n', '')
                  },
                },
              },
            },
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: { interval: 0 },
              data: [
                '中铁交通',
                '\n中铁南方',
                '中铁投资',
                '\n中铁开投',
                '中铁城投',
                '\n中铁上投',
                '中铁北方',
                '\n中铁文旅',
                '中铁工投资',
                '\n中铁发展投',
                '中铁广州投',
              ],
              splitLine: { show: false },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: '（亿元）',
            },
          ],
          //  这一块需要改动
          series: [
            { name: '表外挂列成本', type: 'bar' },
            { name: '已发生未记劳务费', type: 'bar' },
            { name: '已发生未记材料成本', type: 'bar' },
            { name: '已发生未记机械费', type: 'bar' },
            { name: '已发生未记其他费用', type: 'bar' },
            { name: '账面成本非正常调整', type: 'bar' },
            { name: '多摊多计成本费用', type: 'bar' },
            {
              type: 'pie',
              center: ['16%', '25%'],
              radius: ['15%', '25%'],
              z: 100,
            },
            // 三级公司管理在本级并表的项目饼图
            {
              name: '',
              type: 'pie',
              center: ['50%', '25%'],
              radius: ['15%', '25%'],
              z: 100,
              data: Object.keys(downloadJson).map(function (key) {
                return {
                  name: key.replace('.js', ''),
                  value: downloadJson[key],
                }
              }),
            },
            // 三级公司管理在集团公司并表的项目饼图
            {
              name: '',
              type: 'pie',
              center: ['83%', '25%'],
              radius: ['15%', '25%'],
              z: 100,
              data: Object.keys(downloadJson).map(function (key) {
                return {
                  name: key.replace('.js', ''),
                  value: downloadJson[key],
                }
              }),
            },
          ],
        },
        options,
      }

      if (option && typeof option === 'object') {
        myChart.setOption(option)
      }

      window.addEventListener('resize', myChart.resize)
    },
  },
}
</script>

<style lang="less" scoped>
#qualityadjustment {
  position: relative;
  .d-vertical {
    position: absolute;
    height: 130px;
    border-left: 2px dotted #2e4cba;
  }
  .left_position {
    top: 17%;
    left: 34.5%;
  }
  .right_position {
    top: 17%;
    left: 66.5%;
  }
  .t-vertical {
    position: absolute;
    top: 23.1%;
    p {
      word-wrap: break-word;
      word-break: break-all;
      text-align: center;
    }
  }
  .left_text {
    left: 14.5%;
    p {
      width: 69px;
      font-size: 15px;
    }
  }
  .mid_text {
    left: 46.7%;
    p {
      width: 101px;
    }
  }
  .right_text {
    left: 79.1%;
    p {
      width: 101px;
    }
  }
}
</style>